<template>
  <div class="home flex-five">
    <!-- 内部页面 -->
    <!-- 左边 导航 -->
    <div class="left">
      <Left></Left>
    </div>
    <!-- 右边 -->
    <div class="right">
      <!-- 头部 -->
      <div class="right-top">
           <Header></Header>
      </div>
      
      <!-- 内容区域：根据router左边导航展示区域 -->
      <!-- 根据电脑屏幕来实现内容区域的高度 -->
      <div class="right-content" :style="{height:contentHeight+'px'}">
            <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Left from "@/components/Home/Left";
import Header from "@/components/Home/Header";
export default {
  name: "Home",
  data(){
    return{
      contentHeight:600
    }
  },
  components: {
    Left,
    Header
  },
  mounted(){
    //通过js获取屏幕可用的高度
    // console.log(Windows.screen.availHeight)
    this.getHeight()
  },
  methods:{
    getHeight(){
      // 屏幕可用工作区高度："+ window.screen.availheight;
      this.contentHeight = window.screen.availheight - 185
    }
  }
};
</script>

<style scoped lang="less">
.home {
  height: 100%;
  .left {
    height: 100%;
  }
  .right{
    flex:1;
    .right-content{
      background: rgba(208, 228, 99, .2);
      padding: 8px 25px;
      overflow-y: auto;
    }
  }
}
</style>
